<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      title="订单调度"
      :style="{
        width: dialogWidth,
      }"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            :label-width="120"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
              <n-gi span="1">
<!--                <n-form-item label="指定技师" path="technicianIdsArr">-->
<!--                  <n-select-->
<!--                    :placeholder="'请选择'+selectNum+'名技师'"-->
<!--                    v-model:value="formValue.technicianIdsArr"-->
<!--                    :options="technicianList"-->
<!--                    label-field="name"-->
<!--                    value-field="id"-->
<!--                    clearable-->
<!--                    filterable-->
<!--                    multiple-->
<!--                    style="width: 400px"-->
<!--                  />-->
<!--                </n-form-item>-->

                <n-form-item label="指定技师">
                  <block v-if="formValue.technicianIds">
                    <span style="margin-right: 5px" v-for="(item,index) in chooseTechnicianName" :key="index">{{item}}</span>
                  </block>
                  <n-button type="primary" @click="chooseTechnicianBtn" v-if="!formValue.technicianIds">选择技师</n-button>
                  <n-button style="margin-left: 10px" type="primary" @click="chooseTechnicianBtn" v-else>更换技师</n-button>
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="调度备注" path="desc">
                  <n-input
                    type="textarea"
                    placeholder="请输入调度备注"
                    v-model:value="formValue.dispatchDesc"
                  />
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="操作人">
                  {{ userStore.username }}
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm">
            取消
          </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
            确定
          </n-button>
        </n-space>
      </template>

      <ChooseTechnician ref="chooseTechnicianRef" @reloadTechnician="handleChooseTechnicianInfo"/>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue';
import {Dispatch} from '@/api/spaOrder';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
import { useMessage } from 'naive-ui';
import {adaModalWidth} from '@/utils/hotgo';
import {useUserStore} from "@/store/modules/user";
import ChooseTechnician from "@/views/spaOrder/chooseTechnician.vue";

const emit = defineEmits(['reloadTable']);
const message = useMessage();
const settingStore = useProjectSettingStore();
const userStore = useUserStore();
const loading = ref(false);
const showModal = ref(false);
const selectNum = ref(0);
const chooseTechnicianInfo = ref([]);
const chooseTechnicianName = ref([]);
const chooseTechnicianRef = ref();
const formValue = ref({
  id: 0,
  technicianIds: '',
  dispatchDesc: '',
  dispatchOperatorId: 0
});
const formRef = ref<any>({});
const formBtnLoading = ref(false);
const dialogWidth = computed(() => {
  return adaModalWidth(840);
});
const rules = ref({
})

function openModal(id,num) {
  showModal.value = true;
  // 编辑
  loading.value = true;
  formValue.value.id = id;
  selectNum.value = num;

  loading.value = false;
}

function chooseTechnicianBtn(){
  chooseTechnicianRef.value.openModal(formValue.value.id, selectNum.value, chooseTechnicianInfo.value.join(','));
}

function handleChooseTechnicianInfo(records){
  chooseTechnicianInfo.value = records.split(',')
  let chooseIds = []
  let chooseNames = []
  chooseTechnicianInfo.value.forEach((item)=>{
    let itemObj = item.split('-')
    chooseIds.push(itemObj[0]);
    chooseNames.push(itemObj[1]);
  })
  formValue.value.technicianIds = chooseIds.join(',')
  chooseTechnicianName.value = chooseNames
}

function confirmForm(e) {
  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      formValue.value.dispatchOperatorId = userStore.info ? userStore.info.id : 0;
      Dispatch(formValue.value).then((_res) => {
        message.success('操作成功');
        formBtnLoading.value = false;
        setTimeout(() => {
          closeForm();
          emit('reloadTable');
        });
      }).catch((err) => {
        formBtnLoading.value = false;
      });
    } else {
      formBtnLoading.value = false;
      message.error('请填写完整信息');
    }
  });
}

function closeForm() {
  showModal.value = false;
  loading.value = false;
  selectNum.value = 0;
  formValue.value.id = 0;
  formValue.value.technicianIds = '';
  formValue.value.dispatchDesc = '';
  formValue.value.dispatchOperatorId = 0;
  chooseTechnicianInfo.value = [];
  chooseTechnicianName.value = [];
}

defineExpose({
  openModal,
});
</script>

<style lang="less"></style>


